<template>
  <div class='listSwiper'>
    <!-- swiper -->
    <!-- 选择功能 -->
    <swiper :options="swiperOption">
      <swiper-slide v-for="(img,index) in message" :key="index">
        <img  class="listSwiper-img" :src="host+message" alt="">
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import api from '../../../api/api.js'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default{
    props:{
      message:{
        type:Array
      }
    },
    data(){
      return{
        host:api.host,
        swiperOption: {
          slidesPerView: 2.56,
          spaceBetween: 30,
          freeMode: true,
        }
      }
    },
    methods:{
      goswiperlist(path){
        this.$router.push(path)
      }
    },
    components: {
      swiper,
      swiperSlide,
    }
  }
</script>
<style scoped>
.listSwiper{
  width: 100%;
  height: auto;
}
.swiper-container{
  width: 100%;
  height: 3.2rem;
}
.swiper-slide:nth-child(2n) {
  width: 40%;
}
.swiper-slide:nth-child(3n) {
  width: 20%;
}
.listSwiper-img{
  width: 100%;
  height: 100%;
  border-radius: .2rem;
}
.swiper-slide{
  border-radius: .2rem;
  margin-right: .25rem!important;
}
.listSwiper-tittle{
  width: .7rem;
  color: #fff;
  font-size: .32rem;
  position: absolute;
  left: .3rem;
  top: .2rem;
  word-wrap: break-word;
  overflow: hidden;
}
.iconwhole{
  color: #ee5a8a;
  font-size: .28rem;
}
</style>